<template>
	<view class="container">
		<u-navbar leftIconColor="#FFFFFF" titleStyle="color:#FFFFFF" bgColor="#177A77" title="合单" :autoBack="true">
		</u-navbar>
		<view class="header">
			<view class="header_block">
				<view class="header_sousuo">
					<image class="imgs" src="/static/work/search.png" mode=""></image>
					<input @confirm="handleSearch" v-model="queryParams.name" type="text" placeholder="搜索货品名称"
						placeholder-style="color:#FFFFFF;font-size: 24rpx;"
						style="margin-left: 25rpx;font-size: 24rpx;" />
				</view>
				<view class="header-tabs">
					<view :class="index==indexID?'tabs_1':'tabs_1_active'" v-for="(item,index) in tabs" :key="index"
						@click="handleIndex(index)">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="conter">
			<!-- 成品出库 -->
			<view class="b_1" v-if="indexID==0">
				<view class="top-tabs"></view>
				<u-tabs :current="currentIndex" lineColor="#177A77" activeStyle="color:#177A77;font-size:26rpx;font-weight: 600;"
					inactiveStyle="color:#686868;font-size:26rpx;" :list="list1" @click="handleTabs"></u-tabs>
				<view class="top-tabs-1"></view>

				<view class="goods">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower"
						@refresherrefresh="onRefresh" refresher-enabled="true" :refresher-triggered="triggered"
						refresher-background="#FFFFFF">
						<view class="items" v-for="(item,index) in list" :key="index" @click="handleItems(item)" v-if="list.length>0">
							<view class="round_left">
								<view  :class="ids.includes(item.id)?'round':'round_active'"></view>
								
								<!-- ty_choice_on -->
								<view class="item_title">{{item.name}}</view>
							</view>
							<view class="item_sum">数量:{{item.stock}}</view>
							<view class="item_tolibrary">待出库:{{item.should}}</view>
						</view>
						<view class="None" v-if="list.length==0">
							暂无信息
						</view>
					</scroll-view>
				</view>
				<view class="submit">
					<u-button :loading='loading' :disabled="disabled" :custom-style="customStyleBtn1"
						@click="submit">确认</u-button>
				</view>
			</view>
			<!-- 待分拣成品 -->
			<view v-if="indexID==1" class="b-2">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Ys" @scrolltolower="handleLower"
					@refresherrefresh="onRefresh" refresher-enabled="true" :refresher-triggered="triggered"
					refresher-background="#FFFFFF">
					<view v-if="finishedProduct.length>0" class="arrs" v-for="(item,index) in finishedProduct" :key="index" @click="handleDetail(item)">
						<view class="arrs_1">{{item.productName|| ''}}</view>
						<view class="arrs_2">数量:{{item.count||0}}</view>
						<view>详情></view>
					</view>
					<view class="None" v-if="finishedProduct.length==0">
						暂无信息
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAllCombine,
		getProductCategoryList,
		getCar
	} from '@/api/store.js'
	export default {
		data() {
			return {
				triggered: false,
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				scrollTop: 0,
				list: [],
				list1: [],
				indexID: 0,
				tabs: ['成品出库', '待分拣成品'],
				queryParams: {
					pageNo: 1, //页码
					pageSize: 20, //条数
					categoryId:'',//分类编号
					// name:'',//搜索的商品
				},
				total: 0, //总条数
				ids: [], //选中商品的id集合
				finishedProduct:[],//成品
				itemId:'',
				currentIndex:0,//u-tabs当前选中的索引值
			}
		},
		onLoad() {
			this.getClass()
		},
		methods: {
			// 确认跳转至出库页面
			submit() {
				if(this.ids.length>0){
					uni.navigateTo({
						url: '/pages/work/outbound/outboundDetails?ids=' + JSON.stringify(this.ids)+'&categoryId='+this.queryParams.categoryId+'&name='+this.queryParams.name
					})
				}else{
					uni.showToast({
						title:'请选择商品',
						icon:'none'
					})
				}
			},
			// 获取分类数据
			async getClass(){
				let res = await getProductCategoryList()
				
				// this.queryParams.name =  res.data[0].name
				let all = {id:'',name:'全部'}
				this.list1 = [all,...res.data]
				this.queryParams.categoryId = this.list1[0].id
				this.getList()
			},
			// 获取商品信息
			async getList() {
				if (this.indexID == 0) { //获取成品出库
					let res = await getAllCombine(this.queryParams)
					this.list = [...this.list, ...res.data.list]
					this.total = res.data.total
				} else { //获取待分拨成品
					let res = await getCar()
					this.finishedProduct = [...this.finishedProduct,...res.data]
				}
				setTimeout(() => {
					this.triggered = false
				}, 500)
			},
			// 获取分类数据
			handleTabs(item) {
				// console.log('选中的分类:',item);
				this.queryParams.name=''
				this.currentIndex = item.index
				if(item.id != this.itemId){
					this.itemId = item.id
					this.list=[]
					this.queryParams.categoryId = item.id
					this.getList()
				}
			},
			handleIndex(index) {
				this.list=[]
				this.finishedProduct=[]
				this.indexID = index
				this.getList()
			},
			// 下拉刷新
			onRefresh() {
				this.finishedProduct = []
				this.list = []
				this.triggered = true
				this.queryParams.pageNo = 1
				this.getList()
			},
			// 上拉加载数据
			handleLower() {
				if (this.finishedProduct.length < this.total) {
					this.queryParams.pageNo++
					this.getList()
				}
			},
			// 上拉加载数据
			lower() {
				if (this.list.length < this.total) {
					this.queryParams.pageNo++
					this.getList()
				}
			},
			// 搜搜货品名称
			handleSearch(){
				this.itemId = ''
				this.queryParams.pageNo=1
				this.queryParams.categoryId = ''
				this.currentIndex = 0
				this.list = []
				this.getList()
			},
			// 获取选中数组的数据id
			handleItems(item) {
				if(item.stock>0){
					if (this.ids.includes(item.id)) {
						let i = this.ids.findIndex(it => it == item.id)
						this.ids.splice(i, 1)
					} else {
						this.ids.push(item.id)
					}
				}else{
					uni.showToast({
						title:`"${item.name}"数量：0，请重新选择商品`,
						icon:'none'
					})
				}
			},
			// 详情
			handleDetail(item) {
				uni.navigateTo({
					url: '/pages/work/outbound/sorting?item=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style scoped>
	.None{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #999999;
	}
	.submit {

		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arrs_2 {
		width: 180rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.arrs_1 {
		width: 280rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.arrs {
		font-size: 24rpx;
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.b-2 {
		width: 100%;
		height: calc(100vh - 600rpx);
		margin-top: 56rpx;
	}

	.item_tolibrary {
		width: 180rpx;
		margin-left: 60rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.item_sum {
		width: 180rpx;
		margin-left: 60rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.item_title {
		margin-left: 30rpx;
		width: 200rpx;
		height: 40rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.round_left {
		display: flex;
		align-items: center;

	}

	.round {
		width: 32rpx;
		height: 32rpx;
		background-color: #177A77;
		border-radius: 32rpx;
		border: 1rpx solid #177A77;
		background-image: url('/static/work/ty_choice_on.png');
		background-size: cover; /* 保证图片填充整个容器 */
	}

	.round_active {
		width: 32rpx;
		height: 32rpx;
		background-color: #FFFFFF;
		border-radius: 32rpx;
		border: 1rpx solid #999;
	}

	.items {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.b_1 {
		width: 100%;
		height: calc(100vh - 718rpx);
	}

	.scroll-Ys {
		width: 100%;
		height: calc(100vh - 600rpx);
	}

	.scroll-Y {
		width: 100%;
		height: calc(100vh - 718rpx);
	}

	.goods {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.top-tabs {
		width: 100%;
		height: 52rpx;
	}

	.top-tabs-1 {
		width: 100%;
		height: 22rpx;
	}

	.conter {
		width: 100%;
		height: calc(100vh - 418rpx);
		background-color: #FFFFFF;
		border-radius: 30rpx;
		margin-top: -220rpx;
		z-index: 3;
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tabs_1 {
		/* width: 150rpx; */
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 2rpx solid #FFFFFF;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.tabs_1_active {
		/* width: 150rpx; */
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border-bottom: 2rpx solid #549D90; */
		font-size: 26rpx;
		color: #FFFFFF;
		opacity: 0.5;
	}

	.header-tabs {
		width: 300rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.imgs {
		width: 23rpx;
		height: 23rpx;

	}

	.header_sousuo {
		margin-top: 200rpx;
		width: 603rpx;
		height: 70rpx;
		background-color: #549D90;
		border-radius: 70rpx;
		display: flex;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
	}

	.header_block {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		color: #000000;
		padding: 0 98rpx 0 49rpx;
		box-sizing: border-box;
	}

	.header {
		width: 100%;
		height: 644rpx;
		background-color: #177A77;
		position: relative;
		top: 0;
		left: 0;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>